<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="zhao"
	uri="http://github.com/zhaosc/tags/zhao-functions"%>
<html>
<head>
<title></title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/css.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/css/zTreeStyle/zTreeStyle.css">
<style>
ul.ztree {
	margin-top: 10px;
	border: 1px solid #617775;
	background: #f0f6e4;
	width: 220px;
	height: 200px;
	overflow-y: scroll;
	overflow-x: auto;
}
</style>
</head>
<body>
	<form:form method="post" commandName="user">

		<form:hidden path="id" />
		<form:hidden path="salt" />
		<form:hidden path="locked" />
		
		<c:if test="${op ne '新增' }">
			<form:hidden path="password"></form:hidden>
		</c:if>
		<div class="form-group">
			<form:label path="username"> 用户名:</form:label>
			<form:input path="username" />
		</div>

		<c:if test="${op eq '新增'}">
			<div class="form-group">
				<form:label path="password">密码：</form:label>
				<form:password path="password" />
			</div>
		</c:if>
		<div class="form-group">
			<form:label path="organizationId">所属组织:</form:label>
			<form:hidden path="organizationId" />
			<input type="text" id="organizationName" name="organizationName"
				value="${zhao:organizationName(user.organizationId)}" readonly>
			<a id="menuBtn" href="#">选择</a>
		</div>
		<div class="form-group">
			<form:label path="roleIds">角色列表：</form:label>
			<form:select path="roleIds" items="${roleList}"
				itemLabel="description" itemValue="id" multiple="true" />
			(按住shift键多选)
		</div>

		<form:button>${op}</form:button>
	</form:form>
	<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="tree" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>
    
  <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
	$(function(){
		var setting={
				view:{
					dbClickExpand:false
				},
				data:{
					simpleData:{
						enable:true
					}
				},
				callback:{
					onClick:onClick
				}
		};
		
        var zNodes =[
                     <c:forEach items="${organizationList}" var="o">
                         <c:if test="${not o.rootNode}">
                             { id:${o.id}, pId:${o.parentId}, name:"${o.name}"},
                         </c:if>
                     </c:forEach>
                 ];
        
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree"),
                    nodes = zTree.getSelectedNodes(),
                    id = "",
                    name = "";
            nodes.sort(function compare(a,b){return a.id-b.id;});
            for (var i=0, l=nodes.length; i<l; i++) {
                id += nodes[i].id + ",";
                name += nodes[i].name + ",";
            }
            if (id.length > 0 ) id = id.substring(0, id.length-1);
            if (name.length > 0 ) name = name.substring(0, name.length-1);
            $("#organizationId").val(id);
            $("#organizationName").val(name);
            hideMenu();
        }
        
        function showMenu() {
            var cityObj = $("#organizationName");
            var cityOffset = $("#organizationName").offset();
            $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                hideMenu();
            }
        }

        $.fn.zTree.init($("#tree"), setting, zNodes);
        $("#menuBtn").click(showMenu);
		
	})
	
</script>
</body>
</html>